var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
define(["require", "exports", "myWuZhui", "react", "react-dom", "admin/application", "admin/services/user", "dilu"], function (require, exports, myWuZhui_1, React, ReactDOM, application_1, user_1, dilu_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    function default_1(page) {
        ReactDOM.render(h(EmployeePage, null), page.element);
    }
    exports.default = default_1;
    class EmployeePage extends React.Component {
        constructor(props) {
            super(props);
            this.state = { currentEmployee: {}, roles: [] };
            let service = application_1.default.createService(user_1.UserService);
            service.roles().then(roles => {
                this.setState({ roles });
            });
        }
        showDialog(employee) {
            // let employee: User = {} as User
            this.setState({ currentEmployee: employee });
            ui.showDialog(this.employeeDialog);
        }
        removeItem(employee) {
        }
        save() {
            return __awaiter(this, void 0, void 0, function* () {
                if (!this.validator.check()) {
                    return;
                }
                let employee = this.state.currentEmployee;
                if (employee.id)
                    yield this.dataSource.update(employee);
                else
                    yield this.dataSource.insert(employee);
                ui.hideDialog(this.employeeDialog);
            });
        }
        componentDidMount() {
            this.validator = new dilu_1.FormValidator(this.employeeDialog, { name: 'mobile', rules: [dilu_1.rules.required('请输入员工手机号'), dilu_1.rules.mobile()] });
            let self = this;
            let service = application_1.default.createService(user_1.UserService);
            this.dataSource = new wuzhui.DataSource({
                primaryKeys: ['id'],
                select() {
                    return __awaiter(this, void 0, void 0, function* () {
                        let users = yield service.applicationUsers();
                        return users;
                    });
                },
                insert(item) {
                    return __awaiter(this, void 0, void 0, function* () {
                        let { user_id } = yield service.applicationAddUser(item.mobile, item.role_ids);
                        item.id = user_id;
                    });
                },
                update(item) {
                    return __awaiter(this, void 0, void 0, function* () {
                        return service.applicationUpdateUser(item.id, item.role_ids);
                    });
                }
            });
            myWuZhui_1.createGridView({
                dataSource: this.dataSource,
                element: this.employeeTable,
                columns: [
                    myWuZhui_1.boundField({ dataField: 'mobile', headerText: '手机', headerStyle: { width: '140px' } }),
                    myWuZhui_1.customField({
                        headerText: "角色",
                        createItemCell() {
                            let cell = new wuzhui.GridViewDataCell({
                                dataField: 'role_ids',
                                render(value, element) {
                                    service.roles().then(roles => {
                                        let roleNames = roles.filter(r => value.indexOf(r.id) >= 0).map(o => o.name).join(',');
                                        element.innerHTML = roleNames;
                                    });
                                }
                            });
                            return cell;
                        }
                    }),
                    myWuZhui_1.customField({
                        headerText: '操作',
                        headerStyle: { textAlign: 'center', width: '120px' },
                        itemStyle: { textAlign: 'center' },
                        createItemCell(dataItem) {
                            let cell = new wuzhui.GridViewCell();
                            ReactDOM.render(h(React.Fragment, null,
                                h("button", { className: "btn btn-info btn-minier", onClick: () => self.showDialog(dataItem) },
                                    h("i", { className: "icon-pencil" })),
                                h("button", { className: "btn btn-danger btn-minier", onClick: () => self.removeItem(dataItem) },
                                    h("i", { className: "icon-remove" }))), cell.element);
                            return cell;
                        }
                    })
                ]
            });
        }
        render() {
            let { currentEmployee, roles } = this.state;
            currentEmployee.role_ids = currentEmployee.role_ids || [];
            return h(React.Fragment, null,
                h("ul", { key: 10 },
                    h("li", { className: "pull-right" },
                        h("button", { className: "btn btn-sm btn-primary", onClick: () => this.showDialog({}) },
                            h("i", { className: "icon-plus" }),
                            h("span", null, "\u6DFB\u52A0\u89D2\u8272")))),
                h("table", { key: 20, ref: e => this.employeeTable = e || this.employeeTable }),
                h("div", { className: "modal fade", ref: e => this.employeeDialog = e || this.employeeDialog },
                    h("div", { className: "modal-dialog" },
                        h("div", { className: "modal-content" },
                            h("div", { className: "modal-header" },
                                h("button", { type: "button", className: "close", onClick: () => ui.hideDialog(this.employeeDialog) },
                                    h("span", { "aria-hidden": "true" }, "\u00D7")),
                                h("h4", { className: "modal-title" }, "\u6DFB\u52A0\u5458\u5DE5")),
                            h("div", { className: "modal-body form-horizontal" },
                                h("div", { className: "form-group" },
                                    h("label", { className: "col-sm-2 control-label" }, "\u540D\u79F0*"),
                                    h("div", { className: "col-sm-10" },
                                        h("input", { name: "mobile", type: "text", className: "form-control", placeholder: "\u8BF7\u8F93\u5165\u5458\u5DE5\u624B\u673A\u53F7", value: currentEmployee.mobile || '', onChange: e => {
                                                currentEmployee.mobile = e.currentTarget.value;
                                                this.setState({ currentEmployee });
                                            } }))),
                                h("div", { className: "form-group" },
                                    h("label", { className: "col-sm-2 control-label" }, "\u89D2\u8272"),
                                    h("div", { className: "col-sm-10", style: { paddingTop: 10 } }, roles.map(o => h("span", { key: o.id, className: "checkbox", style: { display: 'unset', paddingRight: 10 } },
                                        h("label", null,
                                            h("input", { type: "checkbox", value: o.id, checked: currentEmployee.role_ids.indexOf(o.id) >= 0, onChange: e => {
                                                    if (e.target.checked) {
                                                        currentEmployee.role_ids.push(o.id);
                                                    }
                                                    else {
                                                        currentEmployee.role_ids = currentEmployee.role_ids.filter(id => id != e.target.value);
                                                    }
                                                    this.setState({ currentEmployee });
                                                } }),
                                            o.name)))))),
                            h("div", { className: "modal-footer" },
                                h("button", { name: "cancel", type: "button", className: "btn btn-default", onClick: () => ui.hideDialog(this.employeeDialog) }, "\u53D6\u6D88"),
                                h("button", { name: "ok", type: "button", className: "btn btn-primary", ref: (e) => {
                                        ui.buttonOnClick(e, () => this.save());
                                    } }, "\u786E\u5B9A"))))));
        }
    }
});
